/* router V5 基础使用 */

/* 一级路由 */

/* react-router-dom 实现 */
// 样式私有化处理  styled-components+style
import React from "react";
import {NavBarBox, NavBox} from "./NavStyle"
import {HashRouter, Route, Switch, Redirect, Link} from "react-router-dom";

import A from "./A.jsx"
import B from "./B.jsx"
import C from "./C.jsx"

const Nav = function () {
    return <HashRouter>
        <NavBox>
            <h2 className="title">购物商城</h2>
            <NavBarBox hover={'red'}>
                <Link to="/a">首页</Link>
                <Link to="/b">秒杀</Link>
                <Link to="/c">我的</Link>
            </NavBarBox>
        </NavBox>
        <Switch>
            {/* v5*/}
            <Redirect exact from="/" to="/a"/>
            <Route path="/a" component={A}/>
            <Route path="/b" component={B}/>
            <Route path="/c" render={() => {
                // 当路由匹配后，先把render函数执行，返回值是我们需要的内容
                // 在函数中，可以处理一些事情，例如：登录态检验
                let isLogin = false
                console.log(1212432)
                if (isLogin) {
                    return <C/>
                }
                return <Redirect to="/login"/>
            }
            }/>
            {/*// 放在最后一项，path设置#或者不写，意思是: 以上都不匹配，则执行这个规则*/}
            {/*<Route path="*" compnent={404组件} />*/}
            <Redirect to="/a"/>
            {/* 多不属于，就重定向到 /login */}
            {/*<Route from="" to="/" exact/>*/}
            {/*+ form:从哪来*/}
            {/*+ to:重定向地址*/}
            {/*+ exact:精准匹配*/}
        </Switch>
    </HashRouter>
}

export default Nav